<template>
  <div class="home">
    我是home组件
    <router-link to="/list"> 我要跳转到list by 字符串</router-link> <br />
    <router-link :to="{ path: '/list' }"> 我要跳转到list by object with path </router-link> <br />
    <router-link :to="{ name: 'kfc' }"> 我要跳转到list by object with name</router-link>
    <hr />
    <div>
      <button @click="toList">编程式导航 跳转到列表页</button>
    </div>
    <hr />
    <button @click="toUc">跳转到用户中心</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HomeView',
  // before 在...之前
  // Router 路由
  // leave 离开
  beforeRouteLeave(to, from) {
    // 局部的路由守卫 会在路由离开当前组件之前执行
    // 场景: 当用户在当前页面进行了一些操作, 比如填写了表单, 但是没有提交, 点击了浏览器的返回按钮, 此时就会触发路由守卫
    console.log('home beforeRouteLeave');
    // return false;
  },
  methods: {
    toList() {
      // 在配置api当中 我们可以通过 this.$router来访问路由对象
      // $router.push传入的值跟 routerLink组件的to的属性一致
      // this.$router.push('/list');
      // this.$router.push({ path: '/list' });
      this.$router.push({ name: 'kfc' });
    },
    toUc() {
      this.$router.push({
        name: 'uc',
        params: {
          a: 999,
          b: 2,
        },
      });
    },
  },
});
</script>
